import React from 'react';
import {
  Table, Button, Card, Tag,
} from 'antd';
import { startTask, endTask, taskList } from 'services/task';
import timeFormat from 'utils/time';

export default class TaskDetail extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: [],
      disableStartButton: false,
      type: '',
    };
  }

  getTaskList = (instanceId) => {
    taskList({ params: { instanceId } }).then((data) => {
      this.setState({
        type: data.type,
      });
      const dataSource = Object.keys(data.tasks).map((item) => {
        if (item === '1') this.setState({ disableStartButton: true });
        return (data.tasks[item].map((i) => {
          const re = { ...i };
          re.status = item;
          return re;
        }));
      }).flat();
      this.setState({
        dataSource,
      });
    });
  }

  componentDidMount() {
    const { history: { location: { search } } } = this.props;
    const instanceId = search.substr(1, search.length);
    this.getTaskList(instanceId);
  }

  render() {
    const { history: { location: { search } } } = this.props;
    const instanceId = search.substr(1, search.length);
    const { dataSource, disableStartButton, type } = this.state;
    let title = '自动任务列表';
    let columns = [
      {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
      },
      {
        title: '任务名称',
        dataIndex: 'taskId',
        key: 'taskId',
      },
      {
        title: '发布时间',
        dataIndex: 'releaseTime',
        key: 'releaseTime',
        render: (item) => {
          if (item) return timeFormat(item);
          return null;
        },
      },
      {
        title: '开始时间',
        dataIndex: 'historyTime',
        key: 'historyTime',
        render: (item) => {
          if (item) return timeFormat(item);
          return null;
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (tag) => {
          const tagList = {
            0: {
              color: 'geekblue',
              value: '未开始',
            },
            1: {
              color: 'green',
              value: '运行中',
            },
            2: {
              color: 'blue',
              value: '已完成',
            },
            3: {
              color: 'red',
              value: '异常',
            },
          };
          return (
            <Tag color={tagList[tag].color} key={tag}>
              {tagList[tag].value}
            </Tag>
          );
        },
      },
    ];
    const manualTaskOp = {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        if (record.status === '0') {
          return (
            <Button
              onClick={() => startTask({
                instanceId,
                processId: record.processId,
                taskId: record.taskId,
              }).then(() => {
                this.getTaskList(instanceId);
              })}
              disabled={disableStartButton}
            >
              开始任务
            </Button>
          );
        } if (record.status === '1') {
          return (
            <Button onClick={() => endTask({
              instanceId,
              processId: record.processId,
              taskId: record.taskId,
            }).then(() => {
              this.getTaskList(instanceId);
            })}
            >
              结束任务
            </Button>
          );
        }
        return (<></>);
      },
    };
    if (type === 'manual') {
      columns = [...columns, manualTaskOp];
      title = '人工任务列表';
    }
    return (
      <>
        <Card
          title={title}
          hoverable
        >
          <Table columns={columns} dataSource={dataSource} rowKey="taskId" />
        </Card>
      </>
    );
  }
}
